<template>
<el-container class="box">
  <el-header class="headbox" height="auto">
    <h1>{{info.title}}</h1>
    <p>
      <span>分类：</span>{{info.type}}
      <el-divider direction="vertical"/>
      <span>发布人：</span>{{info.username}}
      <el-divider direction="vertical"/>
      <span>发布时间：</span>{{info.sendTime}}
      <el-divider direction="vertical"/>
      <span>浏览数：</span>{{info.count}}
    </p>
  </el-header>
  <el-main class="mainbox">
    <p v-html="info.content"></p>
  </el-main>
  <el-footer class="footerbox" height="auto">
    <el-row v-if="previous" class="footerlink">
      <el-link icon="el-icon-back" @click="to(previous.no)">上一篇：【{{previous.type}}】{{previous.title}}</el-link>
    </el-row>
    <el-row v-if="next" class="footerlink">
      <el-link icon="el-icon-right" @click="to(next.no)">下一篇：【{{next.type}}】{{next.title}}</el-link>
    </el-row>
  </el-footer>
  <back-to-top :custom-style="myBackToTopStyle" :visibility-height="300" :back-position="50" transition-name="fade" />
</el-container>
</template>

<script>
import {getNoticeByNoApi} from "@/api/notice"
import BackToTop from '@/components/BackToTop'
  export default {
    components: { BackToTop },
    data(){
      return{
        previous:'',
        next:'',
        no:'',
        //用于控制是否分类查看 0 为查看全部
        type:'',
        info:'',
        myBackToTopStyle: {
          right: '50px',
          bottom: '82px',
          width: '48px',
          height: '48px',
          'border-radius': '4px',
          'line-height': '50px', // 请保持与高度一致以垂直居中
          background: '#e7eaf1'// 按钮的背景颜色
        }
      }
    },
    created(){
      this.type = this.$route.params.type;
      this.no = this.$route.params.no;
      this.getNoticeInfo();
    },
    methods:{
      to(no){
        this.$store.dispatch('tagsView/delView', this.$route).then(() => {
          this.$router.replace({path:`/noticeinfo/${this.type}/${no}`});
        })
      },
      async getNoticeInfo(){
        let res = await getNoticeByNoApi({no:this.no,type:this.type});
        if(res!=null&&res.code==200){
          this.previous = res.previous;
          this.info = res.info;
          this.next = res.next;
        }else{
          this.$message.error("公告不存在或已被删除！");
          this.$store.dispatch('tagsView/delView', this.$route).then(() => {
            this.$router.replace({path:"/notice/list"});
          })
        }
      }
    },
  }
</script>

<style lang="scss" scoped>
  .box{
    margin: 30px 5vh;
    padding: 30px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    .headbox{
      text-align: center;

      p{
      font-size: 18px;
      color: #606266;
      span{
        color: #707375;
      }
      }
    }
    .mainbox{
      border-top: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
    }
    .footerbox{
      .footerlink{
        margin-top:10px;
        overflow: hidden;
        .el-link{
          font-size: 16px;
        }
      }

      padding-top:10px;
    }

  }
</style>
